import React from 'react'
import styles from './style.less'
import addImg from '../../static/images/add.svg'
import subImg from '../../static/images/subtract.svg'


// 为0， 不显示减号与值
const Num = ({ onChange, num }) => {
  return (
    <div className={ styles.itemNum }>
      {
        num !== 0 ?
          [
            <div className={ styles.numSub} onClick={ () => onChange( --num ) } key={0}>
              <img src={ subImg } alt="-"/>
            </div>,
            <div className={ styles.numVal } key={1}>
              { num }
            </div>
          ] : [
            <div className={ styles.numSubL } key={ 0 }/>,
            <div className={ styles.numValL }  key={ 1 }/>
          ]
      }
      <div className={ styles.numAdd } onClick={ () => { onChange( ++num ) } }  >
        <img src={ addImg } alt="+"/>
      </div>
    </div>
  )
};


class Item extends React.Component{
  constructor(props) {
    super( props );
  }


  render(){
    let { num, onChange, data } = this.props;
    let { img,name,price } = data;

    return(
      <div className={ styles.item }>
        <div className={ styles.itemImgCon }>
          <img src={ img } alt="photo"/>
        </div>
        <div className={ styles.itemName}>
          { name }
        </div>
        <div className={ styles.itemPrice}>
          ￥{ price / 100}
        </div>
        <Num onChange={ onChange } num={ num } />
      </div>
    )
  }
}

export default Item;